<template>
  <a-layout class="layout">
    <slot name="header"></slot>

    <slot></slot>

    <slot name="footer">
      <a-layout-footer class="footer">
        Ant Design ©2018 Created by Ant UED
      </a-layout-footer>
    </slot>
  </a-layout>
</template>
<script lang="ts">
import { Layout } from "ant-design-vue";
import { defineComponent } from "vue";
export default defineComponent({
  components: {
    ALayout: Layout,
    ALayoutFooter: Layout.Footer,
  },
});
</script>

<style lang="less" scoped>
.layout {
  background: #f0f2f5;
  min-height: 100vh;
  overflow: auto;
  background-color: #f0f2f5;
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: 110px;
  background-size: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.footer {
  margin: 15px 0 24px;
  text-align: center;
}
</style>
